<template>
  <div class="app-container">
    <!--    <el-form :inline="true" :model="searchFrom" class="demo-form-inline" size="small">-->
    <!--      <el-form-item>-->
    <!--        <el-input v-model="searchFrom.number" placeholder="订单号"/>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item>-->
    <!--        <el-input v-model="searchFrom.name" placeholder="下单人昵称"/>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item>-->
    <!--        <el-input v-model="searchFrom.shopName" placeholder="粮店名称"/>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item>-->
    <!--        <el-button type="primary" @click="onSearch">查询</el-button>-->
    <!--      </el-form-item>-->
    <!--    </el-form>-->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="订单编号" align="center" prop="paymentSn" />
      <el-table-column label="头像" width="100" align="center">
        <template slot-scope="scope">
          <el-avatar v-if="scope.row.avatar != ''" shape="square" :size="40" fit="fit" :src="scope.row.avatar" />
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column label="下单人" align="center" prop="nickName" />
      <el-table-column class-name="status-col" label="支付金额" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.amount ? scope.row.amount.payAmount / 100 : '' }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="优惠券金额" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.amount ? scope.row.amount.couponAmount / 100 : '' }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="订单总金额" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.amount ? scope.row.amount.totalAmount / 100 : '' }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="物流单号" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.deliverySn }}
        </template>
      </el-table-column>
      <el-table-column label="商品信息" align="center" width="110">
        <template slot-scope="scope">
          <el-popover placement="bottom" width="700" trigger="click">
            <el-table :data="scope.row.product">
              <el-table-column label="品牌名称" align="center">
                <template slot-scope="productScope">
                  {{ productScope.row.brandName }}
                </template>
              </el-table-column>
              <el-table-column label="商品名称" align="center">
                <template slot-scope="productScope">
                  {{ productScope.row.productName }}
                </template>
              </el-table-column>
              <el-table-column label="商品颜色" align="center">
                <template slot-scope="productScope">
                  {{ productScope.row.productColour }}
                </template>
              </el-table-column>
              <el-table-column label="商品尺寸" align="center">
                <template slot-scope="productScope">
                  {{ productScope.row.productSize }}
                </template>
              </el-table-column>
              <el-table-column label="零售价" align="center">
                <template slot-scope="productScope">
                  {{ productScope.row.productPrice / 100 }}
                </template>
              </el-table-column>
              <el-table-column label="单价" align="center">
                <template slot-scope="productScope">
                  {{ productScope.row.paymentAmount / 100 }}
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center">
                <template slot-scope="productScope">
                  {{ productScope.row.productQuantity / 100 }}
                </template>
              </el-table-column>
              <el-table-column label="优惠券" align="center">
                <template slot-scope="productScope">
                  {{ productScope.row.couponAmount / 100 }}
                </template>
              </el-table-column>
            </el-table>
            <el-button slot="reference" size="mini">查看</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="订单状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.orderStatus | statusFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="备注" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.note }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="printRow(scope.row)">
            打印
          </el-button>
          <el-button v-if="scope.row.orderStatus === 10" type="primary" size="mini" @click="deliveryOrder(scope.row)">
            发货
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="app-pagination">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrevChange"
        @next-click="handleNextChange"
      />
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="1000px"
      :before-close="handleClose"
    >
      <div id="printTest">
        <div class="order">
          <div class="basic">
            <div class="row">
              <div class="number">
                <p>订单编号：{{ orderSelected.orderSn }}</p>
              </div>
              <div class="date">
                <p>订单日期：{{ orderSelected.createTime }}</p>
              </div>
            </div>
            <div class="row">
              <div class="number">
                <p>联系方式：{{ orderSelected.addressPhone }}</p>
              </div>
              <div class="date">
                <p>收货人：{{ orderSelected.addressName }}</p>
              </div>
            </div>
            <div class="row">
              <div class="number">
                <p>收货地址：{{
                  orderSelected.addressProvince + orderSelected.addressCity + orderSelected.addressArea + orderSelected.addressAdditional
                }}</p>
              </div>
            </div>
          </div>
          <div class="good">
            <table class="table">
              <tr class="t-tr">
                <th class="t-th t-80">商品编号</th>
                <!--                <th class="t-th">商品信息</th>-->
                <th class="t-th ">款号</th>
                <th class="t-th t-80">颜色</th>
                <th class="t-th t-80">尺寸</th>
<!--                <th class="t-th t-100">单价</th>-->
                <th class="t-th t-80">数量</th>
              </tr>
              <tr v-for="(item, index) in orderSelected.product" :key="index" class="t-tr">
                <td class="t-td t-80">{{ item.productId }}</td>
                <!--                <td class="t-td">{{ item.productName }}</td>-->
                <td class="t-td ">{{ item.brandName }}</td>
                <td class="t-td t-80">{{ item.productColour }}</td>
                <td class="t-td t-80">{{ item.productSize }}</td>
<!--                <td class="t-td t-100">{{ item.productPrice }}</td>-->
                <td class="t-td t-80">{{ item.productQuantity }}</td>
              </tr>
            </table>
          </div>
          <div class="good-num">
            <p>数量：{{ orderSelected.num }}件</p>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-print="printTest" type="primary">确定打印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { getOmsOrderList, updateOmsOrder } from '@/api/OmsOrder'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: '未付款',
        10: '待发货',
        20: '待收货',
        30: '已完成',
        40: '退款中',
        50: '已关闭'
      }
      return statusMap[status]
    },
    typeFilter(status) {
      const statusMap = {
        0: '个人订单',
        1: '餐馆订单'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      printTest: {
        id: 'printTest',
        popTitle: '订单打印',
        extraCss: '',
        extraHead: ''
      },
      dialogVisible: false,
      orderSelected: {},
      searchFrom: {
        name: '',
        number: '',
        shopName: ''
      },
      list: null,
      listLoading: true,
      total: 0,
      limit: 10,
      page: 1,
      value1: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const searchParams = this.searchFrom
      if (this.value1 != '') {
        searchParams['startTime'] = this.value1[0]
        searchParams['endTime'] = this.value1[1]
      }
      searchParams['page'] = this.page
      searchParams['limit'] = this.limit
      getOmsOrderList(searchParams).then(response => {
        this.list = response.data.records
        this.list.forEach(res => {
          res.num = 0
          res.product.forEach(item => {
            res.num = res.num + item.productQuantity
          })
        })
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    onSearch() {
      this.fetchData()
    },
    /* 上一页*/
    handlePrevChange(event) {
      this.page = event
      this.fetchData()
    },
    /* 下一页*/
    handleNextChange(event) {
      this.page = event
      this.fetchData()
    },
    /* 数字点击*/
    handleCurrentChange(event) {
      this.page = event
      this.fetchData()
    },
    handleSizeChange(event) {
      this.limit = event
      this.fetchData()
    },
    deliveryOrder(event) {
      this.$prompt('请输入物流单号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const form = {
          deliverySn: value,
          orderStatus: 20,
          orderId: event.orderId
        }
        updateOmsOrder(form).then(res => {
          if (res.code === 200) {
            this.$message.success('发货成功')
          } else {
            this.$message.error('发货失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    printRow(event) {
      this.orderSelected = event
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss">
.order-print {
  display: none;
}

.order {
  width: 100%;
  padding: 0 20px 20px;
  overflow: hidden;

  .basic {
    overflow: hidden;

    .row {
      overflow: hidden;
      margin-top: 20px;

      .number {
        float: left;

        p {
          margin: 0;
          font-size: 14px;
        }
      }

      .date {
        float: right;
        min-width: 300px;
        text-align: left;

        p {
          margin: 0;
          font-size: 14px;
        }
      }
    }
  }

  .good {
    width: 100%;
    margin-top: 20px;

    .table {
      width: 100%;

      .t-tr {
        display: flex;

        .t-th {
          flex: 1;
          padding: 10px;
          border-left: 1px solid #cccccc;
          border-top: 1px solid #cccccc;
          font-size: 14px;

          &:last-child {
            border-right: 1px solid #cccccc;
          }

          &.t-80 {
            width: 80px;
            display: inline-block;
            box-sizing: border-box;
            flex: none;
          }

          &.t-100 {
            width: 100px;
            display: inline-block;
            box-sizing: border-box;
            flex: none;
          }

          &.t-200 {
            width: 200px;
            display: inline-block;
            box-sizing: border-box;
            flex: none;
          }

          &.t-120 {
            width: 120px;
            display: inline-block;
            box-sizing: border-box;
            flex: none;
          }

          &.t-150 {
            width: 150px;
            display: inline-block;
            box-sizing: border-box;
            flex: none;
          }
        }

        .t-td {
          flex: 1;
          text-align: center;
          border-left: 1px solid #cccccc;
          border-top: 1px solid #cccccc;
          font-size: 14px;
          padding: 13px;

          &:last-child {
            border-right: 1px solid #cccccc;
          }

          &.t-80 {
            width: 80px;
            display: inline-block;
            box-sizing: border-box;
            flex: none;
          }

          &.t-100 {
            width: 100px;
            display: inline-block;
            box-sizing: border-box;
            flex: none;
          }

          &.t-120 {
            width: 120px;
            display: inline-block;
            box-sizing: border-box;
            flex: none;
          }

          &.t-150 {
            width: 150px;
            display: inline-block;
            box-sizing: border-box;
            flex: none;
          }
        }

        &:last-child {
          border-bottom: 1px solid #cccccc;
        }
      }
    }
  }

  .good-num {
    text-align: right;

    p {
      font-size: 14px;
    }
  }
}

</style>
